<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>答题PK</title>
		<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
		<link rel="stylesheet" href="css/answerQue.css" />
		<link rel="stylesheet" type="text/css" href="css/hehua.css" />
		<link rel="stylesheet" type="text/css" href="css/allianceAlert/alert.css" />
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
		<script src="//res.qiaomukeji.com/js/chomoo-weixin.js?v=3"></script>
		<script type="text/javascript" src="js/moduls/islogin.js"></script>
		<script type="text/javascript" src="js/moduls/pk.js"></script>

		<script type="text/javascript" src="js/adapter.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>

	<body>

		<div class="top">
			<div class="top-logo">
			</div>
			<div class="top-theme">
			</div>
			<div class="top-title">
			</div>

			<div class="top-btnBack" onclick="history.go(-1);">
			</div>
		</div>
		<div class="bottom">
			<div class="bottom-logo2">
			</div>
		</div>

		<div class="content">

			<div class="subTop">

				<div class="right_items">
					<div class="remind itemPic"><img src="img/answerQue/queIcon1.png" /></div>
					<div class="refresh itemPic"><img src="img/answerQue/queIcon2.png" /></div>

				</div>
			</div>

			<div class="middlePath">
				<div class="title">
					<img src="img/answerQue.png" alt="">
				</div>
				<div class="midContent">
					<div class="line">
						<img src="img/line.png" alt="">
					</div>
					<div id="queBox">
						<div class="question">
							<div class="countDown" style="color: #fff;text-align: right;">倒计时：<span></span></div>
							<div class="issue">题目：{{questions[qNext].title}}</div>

							<!--<div :class="clickoption==index?clickStatus[curstate]:clickStatus[0]" v-for="(item,index) in questions[qNext].options" :key="index" @click="selectOption(index)">{{optionCode[index]}}:{{item}}</div>-->
							<div :class="clickoption==index?'answer selected':'answer'" v-for="(item,index) in questions[qNext].options" :key="index" @click="selectOption(index)">{{optionCode[index]}}:{{item}}</div>
						</div>
					</div>
					<div class="line">
						<img src="img/line.png" alt="">
					</div>
				</div>
				<div class="bottomBtn">
					<div class="choose" v-if="seen" @click="nextQue">下一题</div>
					<div class="choose" v-else @click="subQue">提交</div>

				</div>

			</div>
			<div class="bottom-logo">
				<img src="img/bottom_logo2.png" />
			</div>
		</div>

		<div class="alertPage" style="display: none;">
			<div class="alertpage1" style="display: none;">
				<div class="arrow">
					<img src="img/arrow.png" alt="">
				</div>
				<div class="tipTxt">邀请好友加入联盟</div>
				<div class="tipBox">
					<div class="alerttxt1">时间到!</div>
					<div class="alerttxt1" style="font-size: 0.4rem;margin-top: 0;">您的成绩为:<span></span></div>
					<div class="alerttxt1" style="font-size: 0.3rem;width: 5rem;margin-top: 0;">已成功发起挑战,等待对方应战!</div>
					<div class="alertBtn">
						确定
					</div>
				</div>
			</div>

			<div class="alertpage2" style="display: none;">
				<div class="tipBox">
					<div class="alerttxt1">时间到!</div>
					<div class="alerttxt1" style="font-size: 0.4rem;margin-top: 0;">您的成绩为:<span></span></div>
					<div class="alerttxt1" style="font-size: 0.3rem;width: 5rem;margin-top: 0;">挑战成功!</div>
					<div class="alertBtn">
						确定
					</div>
				</div>
			</div>

		</div>

		<script>
			var app = new Vue({
				el: '.content',
				data: {
					qNext: 0,
					answer: -1,
					clickoption: 10,
					questions: [{
						"title": "",
						"answer": "", //答案
						"options": [], //选项
						"isfrush": false //是否刷新
					}],
					optionCode: [],
					score: 0,
					seen: true
				},

				methods: {
					nextQue() {
						if(!this.isfrush) {
							if(this.answer == -1) {
								alert("请选择答案");
								return;
							}
						}
						if(this.qNext == this.questions.length - 1) {
							this.clickoption = 10;
							addQuestion();
							return;
						}
						if(!this.isfrush) {
							var t_answer = this.questions[this.qNext]["answer"];
							if(t_answer == this.answer) {
								this.score += 2;
							} else {
								this.score -= 1;
							}
							var t_div = document.getElementsByClassName("answer");
							t_div[t_answer].classList.add("right");

							for(let i = 0; i < t_div.length; i++) {
								t_div[i].disabled = true;
							}
						}

						this.answer = -1;
						var that = this;
						setTimeout(function() {
							that.clickoption = 10;
							that.qNext += 1;
							that.optionCode = [];
							for(let i = 0; i < that.questions[that.qNext]["options"].length; i++) {
								var t_code = String.fromCharCode(i + 65);
								that.optionCode.push(t_code);
							}
							if(!that.isfrush) {
								document.getElementsByClassName("answer")[t_answer].classList.remove("right");
							}
							that.isfrush = false;
						}, 300)

					},
					subQue() {
						var t_answer = this.questions[this.qNext]["answer"];
						if(t_answer == this.answer) {
							this.score += 2;
						} else {
							this.score -= 1;
						}

						alert("提交成功");
					},
					selectOption(index) {
						this.clickoption = index;
						this.answer = index;
					}
				}

			})
			addQuestion();

			function addQuestion() {
				getQuestion(20, function(res) {
					app.questions = res;
					for(let i = 0; i < app.questions.length; i++) {
						var t_options = app.questions[i]["options"];
						for(let j = 0; j < t_options.length; j++) {
							if(i == 0) {
								var t_code = String.fromCharCode(j + 65);
								app.optionCode.push(t_code);
							}
						}
					}
					app.qNext = 0;
				})
			}
			//点击刷新
			$(".refresh").click(function() {
				userProp(t_skey, 2, function() {
					app.isfrush = true;
					app.nextQue();
				})

			})

			//点击提醒
			$(".remind").click(function() {
				userProp(t_skey, 1, function() {
					var t_answer = app.questions[app.qNext]["answer"];
					//				app.clickoption = t_answer;
					document.getElementsByClassName("answer")[t_answer].classList.add("right");
					app.answer = t_answer;
				})
			})

			var timer = setInterval("countTime()", 1000);
			var t_time = 10;
			$(".countDown span").html(t_time);
			//倒计时
			function countTime() {
				if(t_time > 0) {
					t_time--;
					$(".countDown span").html(t_time);
				} else {
					//					alert("时间结束");
					clearInterval(timer);
					var t_fightId = getPara("fightId");
					var t_manner = getPara("manner") || window.localStorage.getItem("manner");
					var t_rivaId = getPara("rivaId") || window.localStorage.getItem("rivaIds");
					if(t_fightId) {
						//接受挑战
						acceptPk(t_skey, app.score, t_rivaId, t_fightId, function(res) {
							if(res["data"]["result"] == "胜"){
								$(".alerttxt2 span").html("挑战成功!");
							}else if(res["data"]["result"] == "负"){
								$(".alerttxt2 span").html("挑战失败!");
							}else{
								$(".alerttxt2 span").html("战平了!");
							}
							$(".alerttxt1 span").html(app.score);
							$(".alertpage2").show()
							$(".alertPage").show();
						})
					} else {
						if(t_manner == "联盟pk") {
							var _rivaId = t_rivaId.split("-");
						} 
						//完成pk别人
						setPk(t_skey, _rivaId, app.score, t_manner, function(res) {
							$(".alerttxt1 span").html(app.score);
							if(t_manner == "联盟pk") {
								$(".arrow").hide();
								$(".tipTxt").hide();
							}else{
								var t_link = "https://hehua.ai-zuoye.cn/project/?proId=lotus1912&pkId="+res["data"]["id"]
								resetShare("",t_link,"","");
							}
							$(".alertpage1").show()
							$(".alertPage").show();
						})
					}
				}
			}

			//点击确定
			$(".alertBtn").click(function() {
				window.history.go(-1); ;
				window.localStorage.removeItem("rivaIds");
				window.localStorage.removeItem("manner");
			})
			
			
			
			
		</script>

	</body>

</html>